<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由学习-嵌套</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <div id="demo1">
            <!-- 路由触发入口-->
            <router-link to="/user/foo/hello">Go to hello Foo</router-link>
            <router-link to="/user/bar/hi">Go to hi bar</router-link>
        </div>

        <div id="demo2">
            <!-- 路由触发入口-->
            <router-link to="/userSay/foo/error" replace>Foo say error </router-link>
            <router-link to="/userSay/bar/yes" replace>bar say yes </router-link>
        </div>

        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
        <router-view name="say"></router-view>

    </div>


</body>
<script>
    const User = {template: '<div><p>User: {{ $route.params.id }}</p><router-view></router-view></div>'};
    const hello = {template:'<p>say hello</p>'};
    const hi = {template:'<p>say hi</p>'};


    const UserSay = {template: '<div><p>User: {{ $route.params.id }}</p><router-view></router-view></div>'};
    const sayMsg = {template: '<p>say: {{ $route.params.msg }}</p>'};

    const router = new VueRouter({
        routes: [
            // 动态路径参数 以冒号开头
            {
                path: '/user/:id',
                component: User,
                children:[{
                    path:'hello',
                    component:hello
                },{
                    path:'hi',
                    component:hi
                }]
            },
            {
                path: '/userSay/:id',
                component: UserSay,
                children:[{
                    path:':msg',
                    component:sayMsg
                }]
            }
        ]
    });
    const app = new Vue({
        el:"#app",
        router:router
    });
</script>
</html>